<template>
    <div class="body">
        <div class="content">
            <van-field v-model="name" label="收货人" placeholder="请输入用户名"/>
            <van-field v-model="phone" type="number" label="联系电话" placeholder="请输入联系电话"/>
            <van-field v-model="area" label="省市区" placeholder="请选择所在城市" @click="showAddressList = !showAddressList" readonly/>
            <van-field v-model="detail" label="提货点" placeholder="请选择提货点" @click="showSiteList = !showSiteList" readonly/>
                <van-cell-group>
                    <van-cell
                    title="是否为默认地址"
                    >
                    <template #right-icon>
                        <van-checkbox v-model="is_default" ref="checkboxes" />
                    </template>
                    </van-cell>
                </van-cell-group>
        </div>
        <div class="btn-group">
            <van-button type="default" color="#3DCEB9" round size="large" @click="editAddress" v-if="set_address">修改地址</van-button>
            <van-button type="default" round size="large" @click="delAddress" v-if="set_address">删除地址</van-button>
            <van-button type="default" color="#3DCEB9" round size="large" @click="addAddress" v-else>新增地址</van-button>
        </div>
        <van-popup v-model="showAddressList" position="bottom">
            <van-area :area-list="areaList" @confirm="getArea" @cancel="showAddressList = !showAddressList"/>
        </van-popup>
        <van-popup v-model="showSiteList" position="bottom">
            <van-picker
            show-toolbar
            title="社区服务站点"
            value-key="name"
            :columns="siteList"
            @cancel="showSiteList = !showSiteList"
            @confirm="getSite"
            />
        </van-popup>
    </div>
</template>
<script>
import areaList from '../assets/area'
import {SearchSite,AddAddress,EditAddress,DelAddress} from '../ajax'
import { Toast } from 'vant'
export default {
    data() {
        return {
            areaList,
            showAddressList:false,
            showSiteList:false,
            name:this.$store.getters.set_address?this.$store.getters.set_address.name:"",
            phone:this.$store.getters.set_address?this.$store.getters.set_address.tel:"",
            area:this.$store.getters.set_address?this.$store.getters.set_address.address1:"",
            areaData:this.$store.getters.set_address?{province:this.$store.getters.set_address.province,city:this.$store.getters.set_address.city,area:this.$store.getters.set_address.area}:{},
            detail:this.$store.getters.set_address?this.$store.getters.set_address.dedail:"",
            siteList:[],
            site:this.$store.getters.set_address?{id:this.$store.getters.set_address.site}:{},
            is_default:this.$store.getters.set_address?this.$store.getters.set_address.is_default:false,
            set_address:true
        }
    },
    created(){
        console.log(this.$store.getters.set_address)
        this.set_address = this.$store.getters.set_address?true:false;
    },
    methods:{
        getArea(data){
            this.showAddressList = !this.showAddressList
            // console.log(data);
            this.area = `${data[0].name}${data[1].name}${data[2].name}`
            this.areaData = {province:data[0].name,city:data[1].name,area:data[2].name};
            this.getSearchSite(this.areaData);
        },
        getSearchSite(areaData){
            const data = {
                admin_id:this.$store.getters.admin_id,
                province:areaData.province,
                city:areaData.city,
                area:areaData.area
            }
            SearchSite(data).then(res=>{
                // console.log(res);
                this.siteList = res;
            })
        },
        getSite(value){
            // console.log(value);
            this.showSiteList = !this.showSiteList
            if(value){
                this.site = value;
                this.detail = value.name;
            }
        },
        testData(){
            if (!(/^1[34578]\d{9}$/.test(this.phone))) {
                Toast("电话号码格式错误");
                return false;
            }else if(!this.name){
                Toast("请输入收货人姓名");
                return false;
            }else if(!this.areaData.province){
                Toast("请选择省市区");
                return false;
            }else if(!this.site.id){
                Toast("请选择所在站点");
                return false;
            }
            return true;
        },
        addAddress(){
            if(!this.testData()){
                return
            }
            const data = {
                uid:this.$store.getters.wxUserInfo.userinfo.id,
                name:this.name,
                phone:this.phone,
                province:this.areaData.province,
                city:this.areaData.city,
                area:this.areaData.area,
                site:this.site.id,
                address:this.detail,
                is_default:this.is_default?1:0
            }
            AddAddress(data).then(res=>{
                Toast('添加成功');
                this.$router.go(-1);
            })
        },
        editAddress(){
            if(!this.testData()){
                return
            }
            const data = {
                uid:this.$store.getters.wxUserInfo.userinfo.id,
                name:this.name,
                phone:this.phone,
                province:this.areaData.province,
                city:this.areaData.city,
                area:this.areaData.area,
                site:this.site.id,
                address:this.detail,
                is_default:this.is_default?1:0,
                id:this.$store.getters.set_address.id
            }
            // console.log(data);
            EditAddress(data).then(res=>{
                Toast("修改成功");
                this.$router.go(-1);
            })
        },
        delAddress(){

            const data = {
                id:this.$store.getters.set_address.id
            }
            DelAddress(data).then(res=>{
                Toast("删除成功");
                this.$router.go(-1);
            })
        }
    }
}
</script>
<style lang="scss">
    .body{
        height: calc(100vh - 3rem);
        background: #f5f5f5;
        .content{
            width: 90%;
            margin:1rem auto;
            border-radius: 0.4rem;
            overflow: hidden;
        }
        .btn-group{
            width: 90%;
            margin: auto;
            button{
                margin: 0.4rem 0;
            }
        }
        .van-cell__title{
            font-weight: 500;
            font-size: 1rem;
        }
    }
    .body::before{
        content: "";
        display: table;
    }
</style>